{% from 'bootstrap4/nav.html' import render_nav_item %}

<!-- 下面是正常的bootstrap页面代码 -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,shrink-to-fit=no">
    <title>{% block title %}flask bootstrap-app {% endblock %}</title>
    <link rel="icon" href="{{ url_for('static', filename='favicon.png') }}">
    
    <script src="{{ url_for('static', filename='js/login.js') }}"></script>

    {% block style %}
        {{ bootstrap.load_css() }}
    

        <link href="{{ url_for('static',filename='css/style.css') }}" rel="stylesheet" type="text/css">
    {% endblock %}

    <style>
        .main-content {
             width: 58%;
            margin: 0 auto;
        }
        .login-div {
            margin: 0 auto;
        }

        .container-main {
            display: block;
            justify-content: center;
            align-items: center;
            width:auto;
            background-color:rebeccapurple;
        }

        .container1 {
            display:  flex;
            justify-content: center;
    
        
        }
    </style>
    
</head>
<body>
    <!-- 导航栏 -->
    <main class="container">
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> 
            <div class="navbar-header">
                <a class="navbar-brand" href="{{ url_for('auth.index')}}">首页</a>
            </div>

            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" 
                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>                
            </button>   

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto">
                     {#利用宏 render_nav_item 渲染导航栏 #}
                    {{ render_nav_item("todo.index", 'todoApp') }}
                    {{ render_nav_item('watchlist.index', 'watchlistApp') }}
                </ul>

                <ul class="navbar-nav ml-auto"> 
                    <div class="form-inline my-2 my-lg-0">
                        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                        <button class="btn btn-outline-success button-spacing" type="submit">搜索</button>

                        {% if g.user %}                                             
                            <div class="dropdown row">  
                                
                                <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    我的
                                </button>
                                
                                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                    
                                    <a class="dropdown-item" href="#">欢迎<span>{{ user.username}}</p></span></a>
                                    <a class="dropdown-item" href="#">关于我</a>
                                    <a class="dropdown-item" href="{{ url_for('auth.logout')}}">退出</a>
                                </div>                                               
                            </div>
                        {% else %}
                            {{ render_nav_item('auth.login', '登录') }}
                            {{ render_nav_item('auth.register', '注册') }}
                        {% endif %}
                           
                    </div>
                </ul>
            </div>
        </nav>
    </main>
  


        <!-- 中间部分 -->
    {% block content %}       
         {% if g.user %} 
            <div class="main-content">
                <ul>
                    <li><a href="{{ url_for('todo.index') }}">todo APPs</a></li>
                    <li><a href="{{ url_for('watchlist.index') }}">watchlist APPs</a></li>              
                </ul>
            </div> 
         {% else %} 
        <!-- 登录方式1 -->
          <div class="main" id="main">
            <div class="form-container sign-up-container">
                <form action="{{ url_for('auth.register') }}" method="post">
                    <h1>注 册</h1>
                    <span>用户名或手机号注册</span>
                    <input type="text" placeholder="用户名或手机号" name="username">
                    <input type="password" placeholder="密 码" name="password">
                    <input type="password" placeholder="确认密码" name="repassword">
                    <button>注 册</button>
                </form>
            </div>
            <div class="form-container sign-in-container">
                <form action="{{ url_for('auth.login') }}" method="post">
                    <h1>登 录</h1>
                    <span>用户名或手机号登录</span>
                    <input type="text" placeholder="用户名或手机号" name="username">
                    <input type="password" placeholder="密 码" name="password"">
                    <a href="javascript:;">忘记密码？</a>
                    <button>登 录</button>
                </form>
            </div>
            <div class="overlay-container">
                <div class="overlay">
                    <div class="overlay-panel overlay-left">
                        <h1>已有帐号？</h1>
                        <p>请使用您的帐号进行登录</p>
                        <button class="switcher" id="btnLogin">登 录</button>
                    </div>
                    <div class="overlay-panel overlay-right">
                        <h1>没有帐号？</h1>
                        <button class="switcher" id="btnRegister">注 册</button>
                    </div>
                </div>
            </div>        
        </div>


    <!-- 登录方式2： -->    
    {#
    <!-- 登录表单 -->
    <div class="container" id="login-container">
        <form class="form-horizontal" id="loginForm" action="{{ url_for('auth.login')}}" method="POST">
            <h2 class="title-cl1">登 录</h2>
            <div class="form-group row">                            
                <label class="col-sm-3 label-cl1" for="username">账户</label>
                <div class="col-sm-6">
                    <input type="text" name="username" placeholder="手机号" id="login-username" required/>
                </div>            
            </div>

            <div class="form-group row">
                <label class="col-sm-3 label-cl1" for="password">密码</label>
                <div class="col-sm-6">
                    <input type="password" name="password" placeholder="密码" id="login-password" required/>             
                </div>
            </div>  
            <div class="form-group row title-footer">          
                <button type="submit" class="btn btn-primary btn-spacing">登 录</button>                                 
                <div class="toggle-link" onclick="toggleForm()">注册新用户</div>  
            </div> 
        </form>       
    </div>

    <!-- 注册表单 -->
    <div class="container" id="register-container" style="display: none;">
        <form class="form-horizontal" id="registerForm" action="{{ url_for('auth.register')}}" method="POST">
            <h2 class="title-cl1">注 册</h2>
            <div class="form-group row">
                <label class="col-sm-3 label-cl1" for="username">账户</label>
                <div class="col-sm-6">
                    <input type="text" name="phone" placeholder="手机号" id="phone" required/>                 
                </div>
            </div>

            <div class="form-group row">
                <label class="col-sm-3 label-cl1" for="password">密码</label>
                <div class="col-sm-6">
                    <input type="password" name="password" placeholder="请输入密码" id="password" required/>             
                </div>
            </div>

             <div class="form-group row">
                <label class="col-sm-3 label-cl1" for="repassword">确认密码</label>
                <div class="col-sm-6">
                    <input type="password" name="repassword" placeholder="请确认密码" id="repassword" required/>             
                </div>
            </div>

            <div class="form-group row title-footer">
                <button type="submit" class="btn btn-primary btn-spacing">注 册</button>
                <div class="toggle-link" onclick="toggleForm()">已有账户,登录</div>          
            </div>  
        </form>        
    </div>
#}

        {% endif %}    
    {%endblock%}

    <!-- 底部 -->
    <hr style="margin-top: 400px;">
    {% block footer %}
        <footer class="text-center">            
                <small>
                    @2024 <a href="" title='python-flask-app'>python-flask</a> 版权所有
                </small>           
        </footer>
    {% endblock %}

      {% block script %}
           {{ bootstrap.load_js() }}

           <script>         
                // 登录方式1：登录和注册在一个页面，点击后切换
                const container = document.getElementById('main');
                const btnRegister = document.getElementById('btnRegister');
                const btnLogin = document.getElementById('btnLogin');

                btnRegister.addEventListener('click', function () {
                    container.classList.add('right-panel-active')
                })

                btnLogin.addEventListener('click', function () {
                    container.classList.remove('right-panel-active')
                })

                // 登录方式2： 点击切换到注册按钮还是登录按钮
                function toggleForm() {
                    const loginContainer = document.getElementById('login-container');
                    const registerContainer = document.getElementById('register-container');
                    if (loginContainer.style.display === 'none') {
                        loginContainer.style.display = 'block';
                        registerContainer.style.display = 'none';
                    } else {
                        loginContainer.style.display = 'none';
                        registerContainer.style.display = 'block';
                    }    
                };     
           </script>
    {% endblock %}
    
    
</body>
</html>